<template>
  <div class="app-container">
    <el-card shadow="never">
      <template #header>
        <el-col :span="3"><b>作业范围分配</b></el-col>
        <div class="right">
          <el-button
            v-show="!isEdit"
            type="primary"
            @click="fnEdit"
          >编辑</el-button>
          <el-button v-show="isEdit" type="primary" @click="fnSave">保存</el-button>
          <el-button v-show="isEdit" type="primary" plain @click="fnClose">取消</el-button>
        </div>
      </template>
      <div class="search">
        地区关键词：
        <el-input v-model="keyword" placeholder="请输入地区关键词" />
      </div>

      <div class="mapBox">
        <div v-show="isEdit" class="Edit">
          <el-button
            v-show="!isOpenEdit"
            class="btn"
            type="primary"
            @click="startEdit"
          >开始绘制</el-button>
          <el-button
            v-show="isOpenEdit"
            class="btn"
            type="primary"
            @click="saveEdit"
          >完成绘制</el-button>
          <el-button
            v-show="isOpenEdit"
            class="btn"
            type="default"
            @click="delOutletsScope"
          >删除围栏</el-button>
          <p>
            <img
              data-v-192cb3bb=""
              src="../../../assets/warn.png"
              alt=""
              style="
                width: 14px;
                vertical-align: middle;
                margin-bottom: 2px;
                margin-right: 6px;
              "
            >
            <span>点击或拖动鼠标绘制作业范围，右击鼠标结束图形绘制，图形不可有交叉点。完成绘制后，点击提交按钮保存。每个机构仅可支持绘制一个作业范围</span>
          </p>
        </div>
        <baidu-map
          ref="myMap"
          class="map"
          :center="center"
          :zoom="zoom"
          @ready="ready"
        >
          <!-- path: 多边形的路径
                   editing: 是否可以编辑
                   lineupdate: 编辑之后机会触发此事件
               -->
          <bm-polygon
            v-if="hide"
            :path="polygonPath"
            stroke-color="red"
            :stroke-opacity="0.5"
            :stroke-weight="2"
            fill-color="#f2c8c5"
            :editing="editing"
            stroke-style="dashed"
            @lineupdate="updatePolygonPath"
          />
          <!-- 地区检索  keyword：关键字搜索   @searchcomplete：检索完成后的回调函数   auto-viewport：检索结束后是否自动调整地图事业  -->
          <bm-local-search
            :keyword="keyword"
            :auto-viewport="true"
            class="search"
            style="display:none"
          />
        </baidu-map>
      </div>
    </el-card>
    <Footer />
  </div>
</template>

<script>
import { getWorkAreaAPI, saveWorkAreaAPI } from '@/api/employee'
export default {
  name: 'MapContent',
  data() {
    return {
      isEdit: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      treeList: [],
      currentNodeId: '',
      center: {}, // 中心点
      zoom: 15, // 缩放级别
      polygonPath: [],
      map: {},
      editing: false,
      isOpenEdit: false,
      keyword: '',
      delCount: 1,
      hide: true // 彩蛋
    }
  },
  methods: {
    ready({ BMap, map }) {
      this.map = map
      this.map.enableScrollWheelZoom(true)
      this.handleNodeClick()
    },
    async handleNodeClick() {
      const id = this.$route.query.id
      const type = 2
      const res = await getWorkAreaAPI({ id, type })
      console.log(res)
      this.polygonPath = res.polygon?.map((item) => {
        return {
          lat: item.latitude,
          lng: item.longitude
        }
      })
      if (!res.polygon) {
        this.center = {
          lat: res.latitude,
          lng: res.longitude
        }
      } else {
        const { center, zoom } = this.map.getViewport(this.polygonPath)
        this.center = center
        this.zoom = zoom
      }
    },
    updatePolygonPath(e) {
      this.polygonPath = e.target.getPath()
    },
    startEdit() {
      this.editing = true
      this.isOpenEdit = true
    },
    saveEdit() {
      this.editing = false
      this.isOpenEdit = false
    },
    delOutletsScope() {
      let message
      switch (this.delCount) {
        case 3:
          message = '再一再二不再三,我都说了他好像不让删'
          break
        case 6:
          message = '你是不是看不懂啊,我都说了,它不让删!!!'
          break
        case 9:
          message = '好好好,你删吧,你删吧,你看看能不能把它给删掉'
          break
        case 20:
          message = '你还真是犟啊,好好好我给它隐藏起来就当是删掉了'
          this.hide = false
          break
        default:
          message = '我试过了,它好像不让删除  ' + this.delCount
          break
      }
      this.$message.error(message)

      this.delCount++
    },
    fnEdit() {
      this.isEdit = true
    },
    async fnSave() {
      this.fnClose()
      await saveWorkAreaAPI({
        bid: this.$route.query.id,
        polygon: this.polygonPath.map(item => {
          return {
            latitude: item.lat,
            longitude: item.lng
          }
        }),
        type: 2
      })
      this.$message.success('保存成功')
    },
    fnClose() {
      this.isEdit = false
      this.editing = false
      this.isOpenEdit = false
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  :deep(.el-card) {
    .el-card__header {
      padding: 0 25px;
      background-color: #f8faff;
      border-bottom: 0;
      display: flex;
      justify-content: space-between;
      line-height: 60px;
      .el-button {
        width: 90px;
      }
    }
    .el-card__body {
      padding: 0;
      .search {
        font-size: 14px;
        padding-left: 25px;
        padding-top: 20px;
        .el-input {
          width: 230px;
          height: 40px;
        }
      }

      .mapBox {
        padding: 22px 25px;
        height: 64.5vh;
        position: relative;
        .Edit {
          padding-top: 10px;
          height: 80px;
          position: absolute;
          width: calc(100% - 50px);
          z-index: 1;
          text-size-adjust: none;
          background: rgb(255, 255, 255);
          p {
            font-size: 12px;
            color: rgb(198, 126, 18);
            width: 100%;
            background: rgb(255, 245, 231);
            height: 30px;
            line-height: 30px;
            text-align: left;
            padding-left: 10px;
          }
        }
        .map {
          width: 100%;
          height: 100%;
          min-height: 60px;
          overflow: hidden;
          // 使上下居中
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }
  }
  // 百度连接点样式
  ::v-deep .BMap_vectex {
    background-image: none;
    width: 6px;
    height: 6px;
    background-color: red;
    border-radius: 50%;
    text-align: center;
  }
}
</style>
